<template>
<div>
<change-box></change-box>
<Menus>
    简单版递归组件思路分析
    <MenuItem>菜单1</MenuItem>
    <MenuItem>菜单2</MenuItem>
    <MenuItem>菜单3</MenuItem>
    <SubMenu>
        <!-- v-solt: 等价于 # <template v-slot:title> 和 <template #title> 一样-->
        <template #title>
            <div>
                菜单4
            </div>
        </template>
        <MenuItem>菜单4-1</MenuItem>
        <MenuItem>菜单4-2</MenuItem>
        <SubMenu>
        <!-- v-solt: 等价于 # <template v-slot:title> 和 <template #title> 一样-->
        <template #title>
            <div>
                菜单4-3
            </div>
        </template>
        <MenuItem>菜单4-3-1</MenuItem>
        <MenuItem>菜单4-3-2</MenuItem>
    </SubMenu>
        
          
         
    </SubMenu>

  
  
  
</Menus>
</div>
</template>
<script>
import ChangeBox from "@/components/ChangeBox";
import Menus from "./Menus.vue";
import MenuItem from "./MenuItem.vue";
import SubMenu from "./SubMenu.vue"
export default {
name: "Home",
data(){
    return {

    }
},
components: {
ChangeBox,Menus,MenuItem,SubMenu
}
};
</script>